<template>
  <nav class="title">
    <span class="active" @click="showAcheet">{{title}} <van-icon name="arrow-down" class="arrow-down" /></span>
    <Search :search="search" @new_search="getNewSearch" />
    <img v-for="(item, index) in menuData" :key="index" :src="item.img" alt="" @click="$router.push(item.url)">
  </nav>
</template>
<script>
import Search from '@/components/search.vue'
export default {
  props:[],
  components: {Search},
  name: "",
  data() {
    return {
      search:{
        search:""
      },
      title:"全部",
      columns:["全部","普通消息","会议讲座"],
      
      menuData:[
        {url:"/messagegroup/group/mycreate",img:require("@/assets/images/message/icon-group.png"),},
        {url:"/message/mycollect/list",img:require("@/assets/images/home/icon-collect.png"),},
        {url:"/message/1/add",img:require("@/assets/images/home/lifeserve/icon-edit.png"),},
      ]
    };
  },
  methods: {
    showAcheet(){
       this.$store.state.dias.acheet.show=true
       this.$store.state.dias.acheet.columns=this.columns
       this.$store.state.dias.acheet.confirm=this.confirm
     },
     confirm(val){
       this.title=val
       this.$store.state.dias.acheet.show=false
       _bus.$emit("screen",{classify:this.title,...this.search})
     },
     getNewSearch(){
       _bus.$emit("screen",{classify:this.title,...this.search})
     }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.title{
  font-size: 16px;
  color: #fff;
  line-height: 90px;
  height: 90px;
  background-color: #00998d;
  display: flex;
  justify-content: space-between;
  padding:0 20px;

  .active:hover{
    background-color: transparent;
  }

  img{
    width: 48px;
    height: 48px;
    padding: 10px;
    margin-top: 10px;
  }
  img:active{
    background-color: #07a79b;
  }
}
</style>